<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Dagre Layout</title>
  </head>
  <style>
    .g6-tooltip {
      border: 1px solid #e2e2e2;
      border-radius: 4px;
      font-size: 12px;
      color: #545454;
      background-color: rgba(255, 255, 255, 0.9);
      padding: 10px 8px;
      box-shadow: rgb(174, 174, 174) 0px 0px 10px;
    }
  </style>
  <body>
    <div id="mountNode"></div>
    <script src="../build/dagre.js"></script>
    <script src="../build/g6.js"></script>
    <script>
      const data = {
        nodes: [
          {
            id: '1',
            type: 'alps',
            name: 'alps_file1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: '2',
            type: 'alps',
            name: 'alps_file2',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: '3',
            type: 'alps',
            name: 'alps_file3',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: '4',
            type: 'sql',
            name: 'sql_file1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: '5',
            type: 'sql',
            name: 'sql_file2',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: '6',
            type: 'feature_etl',
            name: 'feature_etl_1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: '7',
            type: 'feature_etl',
            name: 'feature_etl_1',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
          {
            id: '8',
            type: 'feature_extractor',
            name: 'feature_extractor',
            conf: [
              {
                label: 'conf',
                value: 'pai_graph.conf',
              },
              {
                label: 'dot',
                value: 'pai_graph.dot',
              },
              {
                label: 'init',
                value: 'init.rc',
              },
            ],
          },
        ],
        edges: [
          {
            source: '1',
            target: '2',
          },
          {
            source: '1',
            target: '3',
          },
          {
            source: '2',
            target: '4',
          },
          {
            source: '3',
            target: '4',
          },
          {
            source: '4',
            target: '5',
          },
          {
            source: '5',
            target: '6',
          },
          {
            source: '6',
            target: '7',
          },
          {
            source: '6',
            target: '8',
          },
        ],
      };

      G6.registerNode(
        'sql',
        {
          drawShape(cfg, group) {
            const rect = group.addShape('rect', {
              attrs: {
                x: -75,
                y: -25,
                width: 150,
                height: 50,
                radius: 10,
                stroke: 'rgb(36,60,96)',
                fill: 'rgb(76,122,187)',
              },
            });
            if (cfg.name) {
              const label = group.addShape('text', {
                attrs: {
                  text: cfg.name,
                  x: 0,
                  y: 0,
                  fill: '#fff',
                  fontSize: 14,
                  textAlign: 'center',
                  textBaseline: 'middle',
                  fontWeight: 'bold',
                },
              });
            }
            return rect;
          },
        },
        'single-shape',
      );
      G6.Global.nodeStateStyle.selected = {
        stroke: '#d9d9d9',
        fill: '#5394ef',
      };

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 1000,
        height: 500,
        layout: {
          type: 'dagre',
          nodesepFunc: d => {
            if (d.id === '3') {
              return 500;
            }
            return 20;
          },
          // nodesep: 500,
          // ranksep: 200
        },
        defaultNode: {
          shape: 'sql',
        },
        defaultEdge: {
          shape: 'polyline',
          style: {
            radius: 20,
            offset: 45,
            endArrow: true,
            lineWidth: 5,
            stroke: 'rgb(76,122,187)',
          },
        },
        modes: {
          default: [
            'drag-canvas',
            'zoom-canvas',
            'click-select',
            {
              type: 'tooltip',
              formatText(model) {
                const cfg = model.conf;
                const text = [];
                cfg.forEach(row => {
                  text.push(row.label + ':' + row.value + '<br>');
                });
                return text.join('\n');
              },
              shouldUpdate: e => {
                // 如果移动到节点文本上显示，不是文本上不显示
                if (e.target.type !== 'text') {
                  return false;
                }
                return true;
              },
            },
          ],
        },
        fitView: true,
      });
      graph.data(data);
      graph.render();
    </script>
  </body>
</html>
